<template>
    <base-modal class="setting-modal" :title="$t('order.setting.logisDialog.text1')" width="536px" :show.sync="dialogVisible" @close="closeDialog">
        <div class="logistics_setting_box">
            <el-input
                class="search_input"
                v-model="keywords"
                :placeholder="$t('order.setting.logisDialog.text2')"
                @change="searchRole"
                @clear="clear"
                clearable
            >
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <div class="logistics_box">
                <div class="all_logistics">
                    <div class="title_view">{{ $t('order.setting.logisDialog.text3') }}（{{activeLogistics.length}} /{{ max }}）</div>
                    <div class="all_list">
                         <template v-if="logisticsCompany.length">
                            <el-table
                            ref="multipleTable"
                            :data="logisticsCompany"
                            row-key="id"
                            style="width: 100%"
                            :show-header="false"
                            @selection-change="handleCheckedChange"
                            >
                                <el-table-column
                                    type="selection"
                                    reserve-selection
                                    :selectable="selectable"
                                    width="40"
                                >
                                </el-table-column>
                                <el-table-column prop="name">
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                </div>
                <div class="change_logistics">
                    <div class="title_view">{{ $t('order.setting.logisDialog.text4') }}</div>
                    <!-- 拖动区域 -->
                    <draggable
                        v-model="activeLogistics"
                        v-bind="{
                        animation: 500,
                        }"
                        @end="handleEnd"
                    >
                        <transition-group>
                            <div
                                v-for="(item, index) in activeLogistics"
                                :key="'active'+item.id"
                                class="list_div"
                            >
                                <div class="nested-draggable-name">
                                    <span class="nested-draggable-name-label">
                                        <i class="iconfont icon-tuozhuaipaixu"></i>
                                    </span>
                                    <span class="nested-draggable-name-text">{{ index + 1 }} - {{ item.name }}</span>
                                </div>
                                <div class="nested-draggable-name-label-actions">
                                    <span class="nested-draggable-name-label nested-draggable-name-fixed" @click="istop(index, item.id)">
                                        <i class="iconfont icon-pushpin"></i>
                                    </span>
                                    <span class="nested-draggable-name-label nested-draggable-name-delete" @click="reduceLogistics(index)">
                                        <i class="iconfont icon-close-circle"></i>
                                    </span>
                                </div>
                            </div>
                        </transition-group>
                    </draggable>
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">{{ $t('common.base.close')}}</el-button>
            <el-button type="primary" @click="change">{{ $t('common.base.save')}}</el-button>
        </div>
    </base-modal>
</template>

<script>
import _ from 'lodash';
import draggable from 'vuedraggable';
import { getLogisticsCompanyList } from '@src/api/FieldApi';
import { t } from '@src/locales'
export default {
    name: 'wiki-dialog',
    components: {
        draggable,
    },
    props: {
        value: {
            type: Array,
            default: () => [],
        },
    },
    data () {
		return {
			dialogVisible: false,
            keywords: '',
            checkAll: false,
            isIndeterminate: true,
            logisticsCompany: [],
            otherPageSelected: [],
            checkList: [],
            activeLogistics: [],
            max: 10,
		}
	},
    computed: {
    },
    watch: {
        activeLogistics: function(newVal, oldVal) {
            if (newVal.length > this.max) {
                this.$message.error(t('order.setting.logisDialog.m1'));
            }
        }
    },
    methods: {
        selectable(row) {
            return this.activeLogistics.length === this.max ? false : true
        },
        async openDialog() {
            this.dialogVisible = true;
            await this.fetchLogisticsCompany()

            this.activeLogistics = _.cloneDeep(this.value);
            this.renderPartsSelection(this.activeLogistics);
        },
        closeDialog() {
            this.dialogVisible = false;
            this.keywords = ''
            localStorage.removeItem('allLogisticsCompany')
        },
        searchRole() {
            localStorage.removeItem('allLogisticsCompany')
            this.fetchLogisticsCompany()
        },
        clear() {
        },
        // 查询所有物流公司
        async fetchLogisticsCompany() {
            const list = await getLogisticsCompanyList({name: this.keywords});
            this.logisticsCompany = list;
        },
        handleCheckedChange(value) {
            if (value.length > this.max) {
                return
            }
            if (this.otherPageSelected.length > 0) {
                this.otherPageSelected.forEach(item => value.splice(item, 1));
            }
            this.activeLogistics = value;
        },
        handleEnd() {},
        renderPartsSelection(value = []) {
            this.$nextTick(() => {
                // 清空操作
                this.activeLogistics = [];
                this.otherPageSelected = [];
                this.$refs.multipleTable.clearSelection();

                if (value.length === 0) return;
                value.forEach(row => {
                    const item = this.logisticsCompany.find(v => v.id === row.id)
                    if (item) this.$refs.multipleTable.toggleRowSelection(item);
                });
            });
        },
        change() {
            let list = []
            this.activeLogistics.map((item, index) => {
                let obj = {
                    expressId: item.id,
                    sortId: index + 1,
                    expressName: item.name,
                    expressCode: item.type
                }
                list.push(obj)
            })
            this.$emit('change', list)
        },
        // 置顶
        istop(index, id) {
            let item = this.activeLogistics.filter(l => { return l.id === id})
            this.activeLogistics.splice(index, 1)
            this.activeLogistics.unshift(item[0])
        },
        // 移除
        reduceLogistics(index) {
            const tableIndex = this.logisticsCompany.findIndex(
                item => item.id === this.activeLogistics[index].id
            );
            // 在当前页面的备件直接切换selection状态，不在当前页的记录下来
            if (tableIndex < 0) {
                this.otherPageSelected.push(index);
                this.activeLogistics.splice(index, 1);
            } else {
                this.$nextTick(() => {
                    this.$refs.multipleTable.toggleRowSelection(
                        this.logisticsCompany[tableIndex]
                    );
                });
            }
        },
    }
}
</script>


<style lang="scss" scoped>
.setting-modal{
	.logistics_setting_box{
        width: 504px;
        max-height: 556px;
        margin: 0 auto;
        .search_input{
            // width: 450px;
            margin: 12px auto 16px;
        }
        .logistics_box{
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;
            .title_view{
                height: 32px;
                background: #F5F5F5;
                line-height: 32px;
                border-bottom: 1px solid #E8E8E8;
                padding: 0 12px;
            }
            .all_logistics{
                height: 378px;
                overflow: auto;
                border-radius: 4px;
                border: 1px solid #E8E8E8;
                width: 240px;
                .all_list{
                    margin: 10px 12px 0;
                }
            }
            .change_logistics{
                height: 378px;
                overflow: auto;
                border-radius: 4px;
                border: 1px solid #E8E8E8;
                width: 240px;
                .list_div{
                    height: 30px;
                    line-height: 30px;
                    cursor: move;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    &:hover{
                        background: #E7F7F6;
                        .nested-draggable-name-label i{
                            display: block;
                        }
                    }
                }
            }
        }
    }
}
</style>
<style>
.setting-modal .logistics_setting_box .logistics_box .el-table th.is-leaf,.setting-modal .logistics_setting_box .logistics_box .el-table td{border:0}
.setting-modal .logistics_setting_box .logistics_box .el-table .el-table__body .el-table__row td{border:0}
.setting-modal .logistics_setting_box .logistics_box .el-checkbox{
    display: block;
    margin-bottom: 14px;
}
.setting-modal .logistics_setting_box .logistics_box .el-checkbox__input.is-checked + .el-checkbox__label{
    color: #232323 !important;
}
</style>